import React,{ Component } from 'react';
import './data-mgt.css';
import { Menu,  Button, message, Input, Table, Select} from 'antd';
import { DownOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import LinkButton from '../../components/link-button/linkButton.jsx';
import { reqWorkshopSearchByOrgid1,reqWorkshopSearchByName1,reqOrganListByParentOrgid2,reqOrganListByParentOrgid_1,reqWsNameSearch,} from '../../api';
import { connect } from 'react-redux';


const { Option } = Select;
const { Search } = Input;


class ShowWorkShop extends Component {

  state = {
    workShopList:[],
    organList:[],
    visible: '0',  
    loading: false,
    searchType:'org_search',
   
  }   

  handleSearchType = (e) => {  // 修改查找类型
    this.setState({
      searchType:e
    })
  };
  showSearchByType = (searchType) => {  // 根据查找类型显示不同的搜索框
    if(searchType === 'name_search'){
      return (
        <Search
          className='workshop-header-search'
          placeholder="根据部门名称搜索"
          enterButton="搜索"
          size="middle"
          onSearch={(value) => this.handleNameSearch(value)}
          loading={this.state.loading}
        />
      )
      }else {
      return (
        <Select
            className='workshop-header-dropdown'
            style={{ width: 170 }} 
            showSearch
            placeholder="请选择矿区"
            onChange={(e) => this.getworkShopList(e)}  // 返回选中项的value值 
          >
            {this.state.organList.map((item) => <Option value={item.org_id}>{item.org_name}</Option>)}
          </Select>
      )
    }  
  };

  handleNameSearch = async(value) => {   // 按姓名查找工区
    const ws_pid = this.props.user.org.org_id;
    const ws_name = value;
    const result = await reqWorkshopSearchByName1(ws_pid,ws_name);
    if(result.code === 200){
      const workShopList = result.data;
      workShopList.map((item1,index) => {   // 将ws_pid 对应的 组织名称找出来，并放入workshopList中用于显示
        if(this.state.organList){
          this.state.organList.map((item2) => {
            if(item1.ws_pid === item2.org_id){
              workShopList[index]['org_name'] = item2.org_name;
            }
          })
        }
      })
      this.setState({
        workShopList
      })
    }else{
      message.error(result.data);
    } 
  };

  initColumns = () => {
    this.columns = [
      { title: '部门名称', dataIndex: 'ws_name', key: 'ws_name' ,
        sorter: {
          compare: (a,b)=>a.ws_name.localeCompare(b.name),   
        },
      },
      { title: '所属矿区', dataIndex: 'org_name', key: 'org_name' },
      {
        title: '测井管理',
        dataIndex: '',
        key: 'dataaction',
        width: 110,
        render: (WorkShopInfor) => <LinkButton onClick={() => this.enterWellsMgt(WorkShopInfor)}>
        <div className='lookBtn'>
        查看测井
          </div>
        </LinkButton>  
      },
    ];
  }

  getworkShopList = async(e) => {   // 根据组织id（工区pid）获取工区列表 
    var ws_pid ;  
    if(e){
      ws_pid = e; 
    }else{
      ws_pid = this.props.user.org.org_id;
    }
    this.setState({ loading: true })
    const result = await reqWorkshopSearchByOrgid1(ws_pid);
    this.setState({loading: false});
    console.log("获取所有工区",result);
    if(result.code === 200){
      const workShopList = result.data;
      workShopList.map((item1,index) => {   // 将ws_pid 对应的 组织名称找出来，并放入workshopList中用于显示
        if(this.state.organList){
          this.state.organList.map((item2) => {
            if(item1.ws_pid === item2.org_id){
              workShopList[index]['org_name'] = item2.org_name;
            }
          })
        }
      })
      this.setState({
        workShopList
      })
    }else{
      message.error(result.data);
    };       
   
  }

  getOrganList = async() => {  // 获取用户权限内的全部组织
    const org_pid = this.props.user.org.org_id;
    this.setState({ loading: true })
    const result = await reqOrganListByParentOrgid_1(org_pid);
    this.setState({loading: false});
    const organList = result.data;  
    this.setState({
      organList
    })
  }


  enterWellsMgt = (WorkShopInfor) => {   // 查看测井 
    this.props.history.push({pathname:"/data-mgt/showWells",state:{workshop:WorkShopInfor}});  
  }

  componentWillMount() {
    this.initColumns();
    this.getOrganList();
  }
  componentDidMount() {
    this.getworkShopList();
  }

  render() {
    const { visible,searchType,workShopList } = this.state;

    return (
      <div className='workshop-mgt-wrapper'>
        <div className='workshop-mgt-header'>
        <div>
        <Select
            className='workshop-header-dropdown'
            style={{ width: 145 }} 
            showSearch
            defaultValue="org_search"
            onChange={(e) => this.handleSearchType(e)}  // 返回选中项的value值 
          >
            <Option value='org_search'>根据矿区查找</Option>
            <Option value='name_search'>根据部门查找</Option>
          </Select>
          {this.showSearchByType(searchType)}
        </div>
        </div>
        <div className='workshop-mgt-content'>
          <Table
            columns={this.columns}
            dataSource={workShopList}            
            //rowKey='_id'  定义每一行的key值
            size='middle'
            //loading={}   在state的定义loading=false，获取数据之前为true，获取数据之后为false
            pagination={false}
            locale = {{
              cancelSort:'点击取消排序',
              triggerAsc:'点击升序',
              triggerDesc:'点击降序'
            }}
          />
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {}
)(ShowWorkShop);